<!doctype html>
<html lang="zh-CN">

<head>
    <title>首页</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/hea.css">
    <link rel="stylesheet" href="./css/right-float.css">
    <link rel="stylesheet" href="./css/bottom.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <!-- 右边浮动 -->
    <div id='float-nav' class='dis-cen'>
        <div class='float-wrap'>
            <div class='dis-cen hover float-hover'>
                <img class='float-re-img' src="./img/find.svg" src-nom='./img/find.svg' src-hover='./img/find-blue.svg' style="width:25px;height: 25px;">
                <div class='fl-nav-info'>
                    <div class='dis-cen'>
                        <p>在线资讯</p>
                        <span class='left-arrow'></span>
                    </div>
                </div>
            </div>
            <div class='dis-cen hover  float-hover'>
                <img class='float-re-img' src="./img/phone.svg" src-nom='./img/phone.svg' src-hover='./img/phone-blue.svg' style="width:25px;height: 25px;">
                <div class='fl-nav-info'>
                    <div class='dis-cen'>
                        <p>TEL:123-123-123</p>
                        <span class='left-arrow'></span>
                    </div>
                </div>
            </div>
            <div class='dis-cen hover float-hover-spe'>
                <img class='float-re-img' src="./img/qr.svg" src-nom='./img/qr.svg' src-hover='./img/qr-blue.svg' style="width:25px;height: 25px;">
                <div class='dis-cen fl-nav-info fl-nav-info-spq'>
                    <div class='dis-cen'>
                        <img src="./img/qr.jpg" style="width:100px;height:100px;">
                        <span>扫码关注</span>
                    </div>
                    <span class='left-arrow'></span>
                </div>
            </div>
            <div class='dis-cen hover float-spe' id='float-spe'>
                <img class='float-re-img' src="./img/go-top.svg" src-nom='./img/go-top.svg' src-hover='./img/go-top-blue.svg' style="width:25px;height: 25px;">
            </div>
        </div>

    </div>
    <!-- 右边浮动 -->

    <!-- 公共头部 -->
    <div id='com-hea-bg'></div>
    <div id='com-hea-wrap'>
        <div class='dis-spa margin-center hea-par' id='hea-par'>
            <img src="./img/logo.png" style="height:40px;width:105px;">
            <div class='hea-nav-wrap'>
                <a href="#" class='nav-hea-active' id='nav-active'>团掌首页</a>
                <a href="./service-application.html">服务项目</a>
                <a href="./case-pc.html">案例展示</a>
                <a href="./news.html">新闻资讯</a>
                <a href="./about-we.html">关于我们</a>
            </div>
        </div>
    </div>
    <!-- 公共头部 -->


    <div style='min-width: 1200px;'>
        <div class="swiper-container swi-hea" style="width:100%;">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src='./img/index-bl.png' width="100%">
                </div>
                <div class="swiper-slide">
                    <img src='./img/index-bl.png' width="100%">
                </div>
            </div>
            <div class="swiper-pagination swi-pag-hea"></div>
        </div>
    </div>

    <div class='dis-spa data-statis'>
        <div>
            <h4>7200+</h4>
            <p>区块链应用服务</p>
        </div>
        <div>
            <h4>1200+</h4>
            <p>网站服务</p>
        </div>
        <div>
            <h4>2600+</h4>
            <p>技术研发</p>
        </div>
        <div>
            <h4>1368+</h4>
            <p>安全运行</p>
        </div>
    </div>

    <div class='cooperation-wrap'>
        <div class='margin-center'>
            <div class='coope-tit'>
                <h3>团掌科技，你的技术合伙人</h3>
                <p>以“专注区块链，用心服务”为核心价值，一切以用户需求为中心</p>
            </div>
            <div class='dis-spa coope-type'>
                <div class='animated coope-info qukuai-coope'>
                    <div class='dis-cen coope-top'>
                        <div class='dis-cen coope-btn'>
                            <div class='dis-cen'>
                                <img src="./img/qukuai.svg" style="width:40px;height:40px;">
                            </div>
                            <a href="#">查看详情</a>
                        </div>
                        <div class='transi-bg'></div>
                    </div>
                    <div class='coope-bottom'>
                        <h6>区块链应用开发</h6>
                        <p>软件皆可定制，按功能开发</p>
                        <p>更人性化，中英文双版</p>
                    </div>
                </div>
                <div class='animated coope-info game-coope'>
                    <div class='dis-cen coope-top'>
                        <div class='dis-cen coope-btn'>
                            <div class='dis-cen'>
                                <img src="./img/game.svg" style="width:40px;height:40px;">
                            </div>
                            <a href="#">查看详情</a>
                        </div>
                        <div class='transi-bg'></div>
                    </div>
                    <div class='coope-bottom'>
                        <h6>区块链游戏开发</h6>
                        <p>去中心化运营，打破孤岛经济</p>
                        <p>虚拟资产确权，数据可信任</p>
                    </div>
                </div>
                <div class='animated coope-info shopping-coope'>
                    <div class='dis-cen coope-top'>
                        <div class='dis-cen coope-btn'>
                            <div class='dis-cen'>
                                <img src="./img/shopping.svg" style="width:40px;height:40px;">
                            </div>
                            <a href="#">查看详情</a>
                        </div>
                        <div class='transi-bg'></div>
                    </div>
                    <div class='coope-bottom'>
                        <h6>网站/商城建设</h6>
                        <p>移动电商，app搭建一应俱全</p>
                        <p>营销型网站，引流成交率更高</p>
                    </div>
                </div>
                <div class='animated coope-info xiaochen-coope'>
                    <div class='dis-cen coope-top'>
                        <div class='dis-cen coope-btn'>
                            <div class='dis-cen'>
                                <img src="./img/xiaocheng.svg" style="width:40px;height:40px;">
                            </div>
                            <a href="#">查看详情</a>
                        </div>
                        <div class='transi-bg'></div>
                    </div>
                    <div class='coope-bottom'>
                        <h6>小程序开发</h6>
                        <p>定制开发，行业全覆盖</p>
                        <p>助力流量变现，赢在互联网时代</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class='cooperation-wrap service-spe-wrap'>
        <div class='margin-center'>
            <div class='coope-tit'>
                <h3>服务特色</h3>
                <p>我们提供优秀创新的设计与技术服务，创造更有价值的区块链技术项目</p>
            </div>
            <div class='dis-spa coope-type' style="margin-top:10px;padding:0 100px;">
                <div class=' qukuai-coope service-spe-info'>
                    <div class='dis-cen simple-se-info'>
                        <img src="./img/research.png">
                        <div class='coope-bottom'>
                            <h6>技术流，论研发</h6>
                            <p>我们说，业界没有最好的技术，只有更</p>
                            <p>棒的技术团队为您定制研发。</p>
                        </div>
                    </div>
                </div>
                <div class=' service-spe-info'>
                    <div class='dis-cen simple-se-info'>
                        <img src="./img/low-cost.png">
                        <div class='coope-bottom'>
                            <h6>创新派，够灵活</h6>
                            <p>全面布局PC端和移动端，基于HTML5</p>
                            <p>响应式布局，智能识别终端设备。</p>
                        </div>
                    </div>
                </div>
                <div class=' service-spe-info'>
                    <div class='dis-cen simple-se-info'>
                        <img src="./img/website.png">
                        <div class='coope-bottom'>
                            <h6>设计控，专于此</h6>
                            <p>不是非要高大上，只是醉心于设计，我</p>
                            <p>们想，再为客户上一个好的作品。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='case-like-wrap'>
        <div class='margin-center'>
            <div class='coope-tit'>
                <h3>案例展示</h3>
                <p>客户的肯定，是我们实力的证明</p>
            </div>
            <div class='dis-spa ban-case-wrap'>
                <div class='dis-cen case-btn'>
                    <p class='dis-cen hover'>
                        <img src="./img/left.svg" src-hover='./img/left-blue.svg' src-nom='./img/left.svg' style="width:25px;height:25px;">
                    </p>
                </div>
                <div style='min-width: 500px;'>
                    <div class="swiper-container swi-case" style="width:100%;">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src='./img/anniu.png' width="100%">
                            </div>
                            <div class="swiper-slide">
                                <img src='./img/anniu.png' width="100%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class='dis-cen case-btn'>
                    <p class='dis-cen hover'>
                        <img src="./img/right.svg" src-hover='./img/right-blue.svg' src-nom='./img/right.svg' style="width:25px;height:25px;">
                    </p>
                </div>
            </div>
            <div class='case-intro'>
                <h6>团掌科技（官网）</h6>
                <p>全面布局PC端和移动端，基于HTML5</p>
            </div>
            <div class='dis-cen'><button class='hover more-case' onclick="window.location.href='./case-pc.html'">更多案例</button></div>
        </div>
    </div>
    <div class='cooper-fri-wrap'>
        <div class='margin-center'>
            <div class='coope-tit'>
                <h3>合作伙伴</h3>
                <p>他们长期与掌团合作</p>
            </div>
            <div class='coope-par'>
                <div class='dis-cen'><img src="./img/coope1.png"></div>
                <div class='dis-cen'><img src="./img/coope2.png"></div>
                <div class='dis-cen'><img src="./img/coope3.png"></div>
                <div class='dis-cen'><img src="./img/coope4.png"></div>
                <div class='dis-cen'><img src="./img/coope5.png"></div>
                <div class='dis-cen'><img src="./img/coope6.png"></div>
                <div class='dis-cen'><img src="./img/coope7.png"></div>
                <div class='dis-cen'><img src="./img/coope8.png"></div>
            </div>
            <div class='dis-cen'><button class='hover more-case'>加入合作</button></div>
        </div>
    </div>
    <div class='news-wrap'>
        <div class='margin-center'>
            <div class='coope-tit'>
                <h3>合作伙伴</h3>
                <div class='toggle-news'>
                    <a class='news-active' href="#">行业资讯</a>
                    <a href="#">团掌动态</a>
                </div>
            </div>
            <div class='news-par'>
                <div class='dis-start'>
                    <div class='news-time'>
                        <h6>10-30</h6>
                        <p>2018</p>
                    </div>
                    <div class='news-info'>
                        <h5>智能合约有什么用？如何应用它？</h5>
                        <p>在区块链里，所有节点共同维护一个区块链账本，所有交易数据都无法篡改、不可伪造，还可以减少人工对...</p>
                    </div>
                </div>
                <div class='dis-start'>
                    <div class='news-time'>
                        <h6>10-30</h6>
                        <p>2018</p>
                    </div>
                    <div class='news-info'>
                        <h5>智能合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如何应用它？</h5>
                        <p>在区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块链里，所有节点共同维护一个区块链账本，所有交易数据都无法篡改、不可伪造，还可以减少人工对...</p>
                    </div>
                </div>
                <div class='dis-start'>
                    <div class='news-time'>
                        <h6>10-30</h6>
                        <p>2018</p>
                    </div>
                    <div class='news-info'>
                        <h5>智能合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如何应用它？</h5>
                        <p>在区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块链里，所有节点共同维护一个区块链账本，所有交易数据都无法篡改、不可伪造，还可以减少人工对...</p>
                    </div>
                </div>
                <div class='dis-start'>
                    <div class='news-time'>
                        <h6>10-30</h6>
                        <p>2018</p>
                    </div>
                    <div class='news-info'>
                        <h5>智能合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如何应用它？</h5>
                        <p>在区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块链里，所有节点共同维护一个区块链账本，所有交易数据都无法篡改、不可伪造，还可以减少人工对...</p>
                    </div>
                </div>
                <div class='dis-start'>
                    <div class='news-time'>
                        <h6>10-30</h6>
                        <p>2018</p>
                    </div>
                    <div class='news-info'>
                        <h5>智能合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如何应用它？</h5>
                        <p>在区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块链里，所有节点共同维护一个区块链账本，所有交易数据都无法篡改、不可伪造，还可以减少人工对...</p>
                    </div>
                </div>
                <div class='dis-start'>
                    <div class='news-time'>
                        <h6>10-30</h6>
                        <p>2018</p>
                    </div>
                    <div class='news-info'>
                        <h5>智能合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如合约有什么用？如何应用它？</h5>
                        <p>在区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块链里，所有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块有节点共同维护一个区块链里，所有节点共同维护一个区块链账本，所有交易数据都无法篡改、不可伪造，还可以减少人工对...</p>
                    </div>
                </div>
            </div>
            <div class='dis-cen'><button class='hover more-case' onclick="window.location.href='./news.html'">查看更多</button></div>
        </div>
    </div>

    <div id='com-bottom'>
        <div class='link-wrap'>
            <div class='margin-center dis-spa frind-link'>
                <span>友情链接：</span>
                <a href="#">匿名科技</a>
                <a href="#">区块链应用开发</a>
                <a href="#">区块链游戏开发</a>
                <a href="#">网站建设</a>
                <a href="#">商城建设</a>
                <a href="#">小程序开发</a>
                <a href="#">H5制作</a>
            </div>
        </div>
        <div class='we-wrap'>
            <div class='margin-center dis-spa find-we-wrap'>
                <div>
                    <p>关注我们</p>
                    <img src="./img/qr-we.png" style="width:100px;height:100px;">
                    <p>扫码获取更多资讯</p>
                </div>
                <div>
                    <h6>联系我们</h6>
                    <h5>400-1234-400</h5>
                    <p>资讯电话：18725729770</p>
                    <p>地址：重庆市渝中区大坪正街康德国际</p>
                    <p>（5A甲级写字楼）2幢30-4</p>
                </div>
                <div>
                    <h6>备案信息</h6>
                    <h5>www.tzqkl.com</h5>
                    <p>备案号： 渝ICP备18013466号-1</p>
                    <p>公安网备：117845185115号</p>
                    <p>公司名称：团掌(重庆)网络科技有限公司</p>
                </div>
            </div>
        </div>
        <div class='bottom-logo'>
            <div class='margin-center dis-cen'>
                <img src="./img/logo.png" style="width:118px;height:45px;">
                <span>您的技术合伙人</span>
            </div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/scrollReveal.js"></script>
    <script>
        //首页轮播图
        new Swiper('.swi-hea', {
            autoplay: true, //可选选项，自动滑动
            loop: true,
            pagination: {
                el: '.swi-pag-hea',
            },
        });
        //公共动效
        window.scrollReveal = new scrollReveal({
            reset: true,
            move: '50px',
        });
        // 头部处理
        var comHeaBg = $('#com-hea-bg');
        var comHea = $('#hea-par');
        var comHeaWrap = $('#com-hea-wrap');
        $(window).scroll(function(ev) {
            var left = $(this).scrollLeft();
            comHea.css('transform', 'translateX(-' + left + 'px)');
            var top = $(this).scrollTop();
            if (top > 350) {
                if (top > 830) {
                    $('#float-spe').css('opacity', 1);
                    comHeaBg.css('box-shadow', 'rgba(0, 122, 255, 0.5) 0px 10px 10px -6px');
                } else {
                    $('#float-spe').css('opacity', 0);
                    comHeaBg.css('box-shadow', 'none');
                }
                comHeaWrap.css('background', 'transparent');
                comHeaBg.css('opacity', (top - 350) / 500);
            } else {
                comHeaWrap.css('background', 'rgba(0, 0, 0, .1)');
                comHeaBg.css('opacity', 0);
            }
        });
        $(window).resize(function(ev) {
            $('#hea-par').css('transform', 'translateX(0px)');
        });
        var indexNav = $('.hea-nav-wrap a'),
            indexAc = $('#nav-active');
        indexNav.hover(function() {
            indexNav.removeClass('nav-hea-active');
        }, function() {
            indexAc.addClass('nav-hea-active');
        });

        //直达顶部
        $('#float-spe').click(function() {
            $('html , body').animate({
                scrollTop: 0
            }, 500);
        });

        // 技术合伙人动效
        $('.coope-info').hover(function() {
            $(this).addClass('pulse');
        }, function() {
            $(this).removeClass('pulse');
        });
        //右边浮动图片处理
        $('.float-re-img').hover(function() {
            $(this).attr('src', $(this).attr('src-hover'));
        }, function() {
            $(this).attr('src', $(this).attr('src-nom'));
        });
        //案例轮播图
        var caseSwi = new Swiper('.swi-case', {
            autoplay: true, //可选选项，自动滑动
            loop: true,
        });
        $('.case-btn').hover(function() {
            var elImg = $(this).find('img');
            var elP = $(this).find('p');
            elImg.attr('src', elImg.attr('src-hover'));
            elP.css({
                'border': '1px solid #2590fe',
                'background': '#e2f0ff'
            });
        }, function() {
            var elImg = $(this).find('img');
            var elP = $(this).find('p');
            elP.css({
                'border': '1px solid transparent',
                'background': '#F7FBFF'
            });
            elImg.attr('src', elImg.attr('src-nom'));
        });
        $('.case-btn').eq(0).click(function() {
            caseSwi.slidePrev();
        });
        $('.case-btn').eq(1).click(function() {
            caseSwi.slideNext();
        });
    </script>
</body>

</html>